<script setup lang="ts">
const props = defineProps({
  modelValue: Boolean,
});

const emits = defineEmits<{
  (event: 'update:modelValue', value: boolean): void
}>();
const showToast = computed({
  get: () => props.modelValue,
  set: (val: boolean) => emits('update:modelValue', val)
});

watch(() => props.modelValue, (val: boolean) => {
  if (val) {
    setTimeout(() => emits('update:modelValue', false), 2e3);
  }
}, { immediate: true, deep: true });
</script>

<template>
  <Transition name="slide">
    <div
      v-show="showToast"
      class="px-6 py-4 rounded-sm bg-neutral-100 text-neutral-800 fixed right-4 top-4 shadow-md shadow-neutral-950 overflow-hidden flex items-center z-[60]"
    >
      <i class="iconfont icon-jinggao mr-2 text-3xl text-amber-500" />
      <slot />
      <div class="progress absolute left-0 bottom-0 w-full h-1 bg-amber-500" />
    </div>
  </Transition>
</template>

<style lang="scss" scoped>
.slide-enter-from, .slide-leave-to {
  opacity: 0;
  transform: translateY(-15px);
}
.slide-enter-active, .slide-leave-active {
  transition: all .3s;
}
.progress {
  animation: progress 2s linear 1 forwards;
}
@keyframes progress {
  100% { width: 0; }
}
</style>